<template>
	<view class="contents">
    <view id="target">
      <view class="center-top">
        <view class="u-flex top">
          <view class="jf">我的积分</view>
          <view class="btn">
            <view class="jf-btn jf-btn_l">去提现</view>
            <view class="jf-btn jf-btn_r">去兑换</view>
          </view>
        </view>
        <view class="u-flex center-top_c u-m-t-32">
          <view class="center-top_l u-flex u-m-l-32">
            <view class="center-top_b">888</view><text>分</text>
          </view>
          <view class="center-top_r">
            <view class="center-lv u-flex">
              <view><uni-rate :touchable="false" v-model="rateValue" color="#bbb" active-color="#333" size="16" disabledColor="#333" disabled /></view>
              <view class="u-m-l-10 u-font-14">银河系会员</view>
            </view>
          </view>
        </view>
      </view>
      <view class="strategy">
        <view class="strategy-title">积分攻略</view>
        <view class="strategy-content">
          <view class="strategy-text">1.社群为交流社群，为了社群内用户体验考虑，我们将适度对行业商家、改装店、部分过度营销行业用户等进行限制加入,敬请谅解!</view>
          <view class="strategy-text">2.你提交认证后，会有工作人员联系你沟通</view>
          <view class="strategy-text">3.如果你是专业的、具备品牌力的经营机构，可以联系治谈服务。</view>
        </view>
      </view>
    </view>
    <view class="record">
      <view class="record-title">积分激励记录</view>
      <view class="record-content" :style="Height">
        <view class="list-item" v-for="(item,index) in 14" :key="index">
          <view class="list-item__content list-item__content--center">
            <text class="list-item__content-title">积分奖励_积分规则1</text>
            <text class="list-item__content-note">2023-08-11 12:12</text>
          </view>
          <view class="list-item__extra">
            <view class="list-item__extra-text">+100</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 50rpx;"></view>
  </view>
</template>

<script>
export default {
	data() {
		return {
      rateValue:5,
      Height:0,
		};
	},
  mounted() {
    uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
    	this.Height = 'height: calc(100vh - ' + (data.height+78) + 'px);'
    }).exec()
  },
	onLoad() {
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
.contents{
  .center-top{
    width: 100%;
    height: 220rpx;
    background-color: $supernut-color;
    padding: 32rpx;
    .center-top_l{
      padding: 16rpx 0;
      display: flex;
      align-items: baseline;
      .center-top_b{
        font-size: 40rpx;
        margin: 0 24rpx;
      }
    }
    .center-top_r{
      margin-left: auto;
      padding: 16rpx 0;
    }
    
    .top{
      .jf{
      }
      .btn{
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .jf-btn{
          border:2rpx solid;
          border-radius: 8rpx;
          padding: 4rpx;
          font-size: 26rpx;
        }
        .jf-btn_l{
          margin-right: 16rpx;
        }
      }
    }
  }
  
  .strategy{
    padding: 0 32rpx;
    background-color: #fff;
    .strategy-title{
      padding: 24rpx 0;
    }
    .strategy-content{
      padding: 32rpx 0;
      .strategy-text{
        line-height: 2;
      }
    }
  }
  .record{
    .record-title{
      padding: 32rpx;
    }
    .record-content{
      width: 100%;
      overflow-x: hidden;
      z-index: 10;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        flex-direction: row;
        cursor: pointer;
        padding: 32rpx;
        margin-bottom: 32rpx;
        .list-item__content{
          display: flex;
          padding-right: 16rpx;
          flex: 1;
          color: #3b4144;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          .list-item__content-title{
            font-size: 28rpx;
            color: #3b4144;
            overflow: hidden;
          }
          .list-item__content-note{
            margin-top: 12rpx;
            color: #999;
            font-size: 24rpx;
            overflow: hidden;
          }
        }
        .list-item__extra{
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          .list-item__extra-text{
            color: $supernut-color;
          }
        }
      }
    }
  }
  
}
</style>
